<link rel="stylesheet" href="./css/task.css">
<div class="body_main">
    <div class="body_left hasScroll">
        <div class="finish">
            <div class="text">任务完成率</div>
            <div class="number">98.5%</div>
        </div>
        <ul class="menu_box" id="menu_box">
            <li class="active">
                <span class="iconfont icon-renwu"></span>
                <span>全部任务</span>
                <span class="number">20</span>
            </li>
            <li>
                <span class="iconfont icon-shifei"></span>
                <span>施肥</span>
                <span class="number">10</span>
            </li>
            <li>
                <span class="iconfont icon-shiyao"></span>
                <span>施药</span>
                <span class="number">1</span>
            </li>
            <li>
                <span class="iconfont icon-nongshi"></span>
                <span>农事</span>
                <span class="number">5</span>
            </li>
            <li>
                <span class="iconfont icon-xuncangcaiji"></span>
                <span>采集</span>
                <span class="number">2</span>
            </li>
            <li>
                <span class="iconfont icon-tongyongleixunchaluxian"></span>
                <span>巡园</span>
                <span class="number">2</span>
            </li>
        </ul>
        <div class="planData">
            <div class="row item">
                <div class="col-md-8">
                    <div class="text">剩余施肥任务</div>
                    <div class="number">0</div>
                </div>
                <div class="col-md-4" id="demoPro1"></div>
            </div>
            <div class="row item">
                <div class="col-md-8">
                    <div class="text">剩余施药任务</div>
                    <div class="number">1</div>
                </div>
                <div class="col-md-4" id="demoPro2"></div>
            </div>
        </div>
    </div>
    <div class="body_center hasScroll">
        <div class="row planList">
            <div class="col-md-4 item">
                <div class="box">
                    <div class="item_item">
                        <span class="mark1 status1">农事</span>标准任务
                        <div class="float-right">优先级：高<span class="grade">!</span></div>
                    </div>
                    <div class="item_item">这边是任务描述的数据，暂时未假数据，请勿在意！</div>
                    <div class="item_item">
                        <span>百草园</span>
                        <div class="float-right mark2"><span class="iconfont icon-renwu"></span>任务已完成</div>
                    </div>
                    <div class="date">
                        2022-02-05至2022-02-06
                    </div>
                </div>
            </div>
            <div class="col-md-4 item">
                <div class="box">
                    <div class="item_item">
                        <span class="mark1 status2">农事</span>标准任务
                        <div class="float-right">优先级：高<span class="grade">!</span></div>
                    </div>
                    <div class="item_item">这边是任务描述的数据，暂时未假数据，请勿在意！</div>
                    <div class="item_item">
                        <span>百草园</span>
                        <div class="float-right mark2"><span class="iconfont icon-renwu"></span>任务已完成</div>
                    </div>
                    <div class="date">
                        2022-02-05至2022-02-06
                    </div>
                </div>
            </div>
            <div class="col-md-4 item">
                <div class="box">
                    <div class="item_item">
                        <span class="mark1 status2">农事</span>标准任务
                        <div class="float-right">优先级：高<span class="grade">!</span></div>
                    </div>
                    <div class="item_item">这边是任务描述的数据，暂时未假数据，请勿在意！</div>
                    <div class="item_item">
                        <span>百草园</span>
                        <div class="float-right mark2"><span class="iconfont icon-renwu"></span>任务已完成</div>
                    </div>
                    <div class="date">
                        2022-02-05至2022-02-06
                    </div>
                </div>
            </div>
            <div class="col-md-4 item">
                <div class="box">
                    <div class="item_item">
                        <span class="mark1 status2">农事</span>标准任务
                        <div class="float-right">优先级：高<span class="grade">!</span></div>
                    </div>
                    <div class="item_item">这边是任务描述的数据，暂时未假数据，请勿在意！</div>
                    <div class="item_item">
                        <span>百草园</span>
                        <div class="float-right mark2"><span class="iconfont icon-renwu"></span>任务已完成</div>
                    </div>
                    <div class="date">
                        2022-02-05至2022-02-06
                    </div>
                </div>
            </div>
            <div class="col-md-4 item">
                <div class="box">
                    <div class="item_item">
                        <span class="mark1 status1">农事</span>标准任务
                        <div class="float-right">优先级：高<span class="grade">!</span></div>
                    </div>
                    <div class="item_item">这边是任务描述的数据，暂时未假数据，请勿在意！</div>
                    <div class="item_item">
                        <span>百草园</span>
                        <div class="float-right mark2"><span class="iconfont icon-renwu"></span>任务已完成</div>
                    </div>
                    <div class="date">
                        2022-02-05至2022-02-06
                    </div>
                </div>
            </div>
        </div>
        <div class="comPage clearfix">
            <div class="pageBox">
                <a class="iconfont icon-zuo"></a>
                <a class="pageNum active">1</a>
                <a class="pageNum">2</a>
                <a class="iconfont icon-zuo rightBtn"></a>
                <span class="spanBtn">转到</span>
                <input type="number" placeholder="输入页数"/>
                <span class="text">页</span>
                <span class="spanBtn">跳转</span>
            </div>
        </div>
    </div>
</div>
<div class="body_right hasScroll">
    <div class="right_search">
        <input type="text"/>
        <span class="iconfont icon-sousuo"></span>
    </div>
    <div class="planSet">
        <div class="item">
            显示未完成任务
            <span class="switch selected"></span>
        </div>
        <div class="item">
            显示已完成的任务
            <span class="switch selected"></span>
        </div>
        <div class="item">
            显示已忽略的任务
            <span class="switch selected"></span>
        </div>
    </div>
    <div class="right_foot">
        <div class="item clearfix">
            <div class="iconfont icon-liucheng"></div>
            <div class="title">2021年度良田基础生产流程</div>
        </div>
    </div>
</div>
<script>
    $(function () {
        $("#menu_box").off('click', 'li').on('click', 'li', function () {
            $(this).addClass('active').siblings().removeClass('active');
        })
         /**分页跳转 */
        $(".pageBox").off('click','.pageNum').on('click','.pageNum',function(){
            $(this).addClass('active').siblings().removeClass('active');
        })
        /*switch选择*/
        $(".switch").on('click',function(){
            if($(this).hasClass('selected')){
                $(this).removeClass('selected');
            }else{
                $(this).addClass('selected');
            }
        });
        $("#demoPro1").initProgress({
            val: 2,
            maxVal: 2,
            width: 60,
        });
        $("#demoPro2").initProgress({
            val: 1,
            maxVal: 2,
            width: 60,
        });
    })

</script>